1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<script>
import { t } from '$lib/translations';
import { back, copy, f, s, fiat, sats } from '$lib/utils';
import { Avatar, Icon } from '$comp';
import { format } from 'date-fns';
import { PUBLIC_EXPLORER as expl } from '$env/static/public';
export let data;
let { user, payment: p } = data;
let { username } = user;
let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
let a = Math.abs(amount);
fee = fee || 0;
</script>
<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
<Icon icon="arrow-left" style="w-10" />
</button>
<div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl">
<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
{$t(amount < 0 ? 'payments.sent' : 'payments.received')}
</h1>
{#if p.with}
<div>
<span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span>
<a href={`/${p.with.username}`}>
<div class="flex">
<div class="my-auto">
<Avatar user={p.with} size={20} />
</div>
<div class="my-auto ml-1">{p.with.username}</div>
</div>
</a>
</div>
{/if}
<div>
<span class="text-lg text-secondary">Amount</span>
<div>
{f(fiat(a, rate), currency)}
{#if tip}
<span class="text-lg">
+ {f(fiat(tip, rate), currency)}
</span>
{/if}
<span class="text-secondary"
>⚡️{`${s(a)}`}
{#if tip}
<span class="text-lg">
+ ⚡️{s(tip)}
</span>
{/if}
</span>
</div>
</div>
<div>
<span class="text-lg text-secondary">Network fee</span>
<div>
{f(fiat(fee, rate), currency)}
<span class="text-secondary">⚡️{`${s(fee)}`}</span>
</div>
</div>
{#if ourfee > 0}
<div>
<span class="text-lg text-secondary">Platform fee</span>
<div>
{f(fiat(ourfee, rate), currency)}
<span class="text-secondary">⚡️{`${s(ourfee)}`}</span>
</div>
</div>
{/if}
<div>
<span class="text-lg text-secondary">Date</span>
<div>
{format(new Date(created), 'MMMM d')},
{format(new Date(created), 'h:mm aaa')}
</div>
</div>
{#if type === 'bitcoin'}
<div>
<span class="text-lg text-secondary">Txid</span>
<div class="flex">
<div>
<a href={`${expl}/tx/${id}`} target="_blank" rel="noreferrer">{id}</a>
</div>
<button class="flex font-bold hover:opacity-80 mb-auto my-auto" on:click={() => copy(id)}
><Icon icon="copy" style="ml-2 w-20 my-auto" />
</button>
</div>
</div>
{/if}
</div>
|
